<template>
  <div class="container">
    <div>
      <el-row :gutter="20">
        <el-col :span="6">
          <el-form ref="form" :model="form">
            <el-form-item label="查询日期起始：" label-width="120px">
              <el-date-picker
                v-model="form.StartDate"
                type="date"
                placeholder="选择日期"
                value-format="yyyy-MM-dd"
              ></el-date-picker>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="6">
          <el-form ref="form" :model="form">
            <el-form-item label="查询日期结束：" label-width="120px">
              <el-date-picker
                v-model="form.EndDate"
                type="date"
                placeholder="选择日期"
                value-format="yyyy-MM-dd"
              ></el-date-picker>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="6">
          <el-form ref="form" :model="form" style="float: left">
            <el-button size="mini" type="primary" @click="getlistdata"
              >查 询</el-button
            >
            <el-button size="mini" type="success" @click="exportExcel"
              >导 出</el-button
            >
          </el-form>
        </el-col>
      </el-row>
    </div>
    <el-table
      highlight-current-row
      v-loading="loading"
      :data="
        tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)
      "
    >
      <el-table-column
        prop="LICENSE_PLATE"
        label="车辆名称"
        align="center"
        width="200"
      ></el-table-column>
      <el-table-column
        prop="Count"
        label="运输趟次"
        align="center"
        width="150"
      ></el-table-column>

      <el-table-column
        prop="WTime"
        label="持续时长（秒）"
        align="center"
        width="150"
      ></el-table-column>
      <el-table-column
        prop="SD"
        label="到达时间"
        align="center"
        width="200"
      ></el-table-column>
      <el-table-column
        prop="ED"
        label="离开时间"
        align="center"
        width="200"
      ></el-table-column>
      <el-table-column
        prop="RoadName"
        label="处理厂名称"
        align="center"
        width="700"
      ></el-table-column>
      <!-- <el-table-column label="操作" width="100">
        <template slot-scope="scope">
          <el-button type="text" icon="el-icon-info" @click="handleEdit(scope.$index, scope.row)">详情</el-button>
        </template>
      </el-table-column>-->
    </el-table>
    <div class="pagination">
      <el-pagination
        background
        layout="total, sizes, prev, pager, next, jumper"
        :current-page="currentPage"
        :page-size="pageSize"
        :total="tableData.length"
        @size-change="handleSizeChange"
        @current-change="handlePageChange"
      ></el-pagination>
    </div>
  </div>
</template>
<script>
import "@/assets/css/common.css";
import { formatDate } from "@/common/js/date.js";
import export2Excel from "@/utils/exportExcel/index.js";
export default {
  data() {
    return {
      currentPage: 1, //初始页
      pageSize: 10, //    每页的数据
      loading: false,
      form: {
        StartDate: formatDate(
          new Date(new Date() - 3600 * 1000 * 24),
          "yyyy-MM-dd"
        ),
        EndDate: formatDate(new Date(), "yyyy-MM-dd"),
      },
      // teamList: [{ "CLIENT_NAME": "机扫车" }, { "CLIENT_NAME": "垃圾车" }],
      // teamValue: '机扫车',
      tableData: [],
      originalData: [],
    };
  },
  created() {
    this.getlistdata();
  },
  methods: {
    async getlistdata() {
      this.currentPage = 1;
      this.loading = true;
      var end = formatDate(new Date(new Date(this.form.EndDate).getTime() + 3600 * 1000 * 24), 'yyyy-MM-dd');
      var url =
        "RubbishVehicle/GetZZZCLCWorkCount?type=3&StartTime=" + this.form.StartDate + "&EndTime=" + end;
      const { data } = await this.$Http.get(url);
      for (var i = data.length - 1; i >= 0; i--) {
        if (data[i].Count == 0) {
          data.splice(i, 1);
        }
      }
      this.tableData = data;
      this.loading = false;
    },
    // 导出Excel
    exportExcel() {
      // let excelName = "车辆运往处理厂趟次";
      let excelName = "处理厂趟次统计";
      const filterVal = ["LICENSE_PLATE", "Count", "SD", "ED", "RoadName"];
      const tHeader = [
        "车辆名称",
        "持续时长（秒）",
        "到达时间",
        "离开时间",
        "处理厂名称",
      ];
      export2Excel(tHeader, filterVal, this.tableData, excelName);
    },
    //详情
    handleEdit(index, row) {
      //   this.idx = index;
      //   this.form = row;
      //   this.editVisible = true;
    },
    // 分页导航
    handlePageChange(currentPage) {
      this.currentPage = currentPage;
      // console.log(this.currentPage)
      // this.$set(this.query, 'pageIndex', val);
      // this.getData();
    },
    handleSizeChange(size) {
      this.pageSize = size;
      console.log(this.pageSize);
    },
  },
};
</script>
<style>
.content {
  overflow-y: scroll;
}
.el-col-6 {
  min-width: 400px;
  min-height: 50px;
}
.el-table th {
  height: 40px;
}
</style>